// import {
//   computed,
//   defineComponent,
//   inject,
//   onMounted,
//   onUnmounted,
//   watch,
// } from 'vue';
// import {
//   handleDragover,
//   handleDrop,
//   handleDragleave,
// } from '@/views/editor/hooks/use-component-drag';
// import {
//   handleClickComponent,
//   handleMousedown,
// } from '@/views/editor/hooks/use-editor';
// import './simulator.less';
// //模拟器视图区域
// export default defineComponent({
//   props: {
//     modelValue: Object,
//   },
//   setup(props, ctx) {
//     const { componentMap } = inject('editorConfig');
//     //获取数据
//     const data = computed(() => props.modelValue);
//     //更新data数据
//     watch(
//       () => data,
//       (newVal) => {
//         ctx.emit('update:modelValue', newVal);
//       },
//       { deep: true }
//     );
//
//     // 初始缩放比例为1
//     let scale = 1;
//     document.addEventListener(
//       'wheel',
//       function (event) {
//         if (event.ctrlKey) {
//           event.preventDefault();
//           const el = event.target;
//           if (
//             el.getAttribute('id') === 'simulator' ||
//             el.getAttribute('id') === 'simulator-canvas-container'
//           ) {
//             const node = document.getElementById('simulator');
//             const scaleValueString = node.style.transform;
//             const scaleValue = scaleValueString.split('(')[1].split(')')[0];
//
//             //缩小
//             if (event.deltaY > 0 && Number(scaleValue) < 0.3) {
//               return;
//             }
//             //放大
//             if (event.deltaY < 0 && Number(scaleValue) > 1.4) {
//               return;
//             }
//             const delta = event.deltaY > 0 ? 1 / 1.1 : 1.1; // 根据滚动方向调整缩放比例
//
//             scale *= delta; // 更新缩放比例
//             node.style.transition = 'all ease .4s';
//             node.style.transform = `scale(${scale})`; // 应用缩放效
//             // const simulatorScaleContentEl = document.getElementById('simulator-scale-content');
//             // const sourceHeight = simulatorScaleContentEl.getAttribute('sourceHeight');
//             // const sourceWidth = simulatorScaleContentEl.getAttribute('sourceWidth');
//             // simulatorScaleContentEl.style.height = sourceHeight * scale + 'px';
//             // simulatorScaleContentEl.style.width = sourceWidth * scale + 'px';
//           }
//         }
//       },
//       {
//         //禁止默认事件
//         passive: false,
//       }
//     );
//
//     let isDragging = false;
//     let isSpaceKeyDown = false;
//     const handleKeyDown = (e, simulatorEl) => {
//       if (e.key === ' ' && e.target === document.body) {
//         e.preventDefault();
//         if (!isSpaceKeyDown) {
//           isSpaceKeyDown = true;
//         }
//         simulatorEl.setAttribute('isKeydown', 'true');
//       }
//     };
//     const handleKeyUp = (e, simulatorEl) => {
//       if (e.key === ' ') {
//         simulatorEl.setAttribute('isKeydown', 'false');
//         if (e.target === document.body) {
//           isSpaceKeyDown = false;
//         }
//       }
//     };
//     const handleMouseDown = (e) => {
//       const { target } = e;
//       if (isSpaceKeyDown) {
//         isDragging = true;
//       }
//
//       const offsetX = e.clientX - parseInt(getComputedStyle(target).left);
//       const offsetY = e.clientY - parseInt(getComputedStyle(target).top);
//       function handleMousemove(e) {
//         if (isDragging) {
//           // 更新元素的位置
//           target.style.left = e.clientX - offsetX + 'px';
//           target.style.top = e.clientY - offsetY + 'px';
//         }
//       }
//       function handleMouseup() {
//         // 重置拖动标志并移除事件监听
//         if (isSpaceKeyDown) {
//           isDragging = false;
//         }
//         document.removeEventListener('mousemove', handleMousemove);
//         document.removeEventListener('mouseup', handleMouseup);
//       }
//
//       target.addEventListener('mouseup', handleMouseup);
//       target.addEventListener('mousemove', handleMousemove);
//     };
//     onMounted(() => {
//       const simulatorEl = document.getElementById('simulator');
//       document.addEventListener('keydown', (e) =>
//         handleKeyDown(e, simulatorEl)
//       );
//       document.addEventListener('keyup', (e) => handleKeyUp(e, simulatorEl));
//       simulatorEl.addEventListener('mousedown', handleMouseDown);
//     });
//     onUnmounted(() => {
//       // document.removeEventListener('keydown');
//     });
//     return () => (
//       <div id="simulator-canvas-container">
//         <div
//           id="simulator"
//           className="simulator"
//           onDragOver={handleDragover}
//           onDragLeave={handleDragleave}
//           onDrop={(e) => handleDrop(e, data)}
//           style={{
//             height: data.value.container.height + 'px',
//             width: data.value.container.width + 'px',
//             transform: 'scale(1)',
//           }}>
//           {data.value.components.map((component) => {
//             const { id, name, config } = component;
//             const style = {
//               position: 'absolute',
//               left: config.style.left + 'px',
//               top: config.style.top + 'px',
//             };
//             return (
//               <div
//                 style={style}
//                 id={id}
//                 onClick={(e) => handleClickComponent(e, component)}
//                 onMousedown={(e) => handleMousedown(e, component)}>
//                 {componentMap[name].render(config)}
//               </div>
//             );
//           })}
//         </div>
//       </div>
//     );
//   },
// });
